<template>
  <view>
    <!-- 搜索框 -->
    <search />

    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator
        class="goods-item"
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="`/goodsPackage/goods_detail/index?goods_id=${item.goods_id}`"
      >
        <image :src="item.goods_small_logo || ''" class="goods-image" mode="aspectFit" />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
    <view v-if="goodsList.length === total">-----数据已经加载完毕------</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下面这个变量是 发请求 需要的query参数
      queryParams: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10,
      },
      goodsList: [],
      total: null,
      tabList: [{ name: '综合' }, { name: '销量' }, { name: '价格' }],
    };
  },
  onLoad(options) {
    this.queryParams.query = options.query;
    this.queryParams.cid = options.cid;

    this.getGoodsList();
  },
  onReachBottom() {
    // 当前如果数据已经加载完毕，就不要在page++ 发请求了

    // 当前页码 * 每页显示条数   与  所有数据总数进行对比
    //  当前页面渲染列表的总数 goosList数组长度  与 所有数据总数进行对比
    // if (this.queryParams.pagenum * this.queryParams.pagesize < this.total) {
    // if (this.goodsList.length !== this.total) {
    if (this.goodsList.length < this.total) {
      this.queryParams.pagenum++;
      this.getGoodsList();
    } else {
      uni.showToast({
        title: '数据到底了，不要在拉了',
        icon: 'none',
      });
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 先数据重置， 在发请求
    this.queryParams.pagenum = 1;
    this.goodsList = [];
    this.getGoodsList();

    uni.stopPullDownRefresh();
  },
  methods: {
    // uni.$u.http.get('/user/login', {params: {userName: 'name', password: '123456'}})
    async getGoodsList() {
      const res = await uni.$u.http.get('/goods/search', { params: this.queryParams });
      this.total = res.data.message.total;

      this.goodsList = [...this.goodsList, ...res.data.message.goods];
    },
  },
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>
